<template>
  <div class="login-container" style="margin-top: 20px;">
    <!-- <h2 style="text-align: center; margin-top: 12px;">注册</h2> -->
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <p>用户名：</p>
        <input type="text" v-model="username" id="username" required />
      </div>
      <div class="form-group">
        <p>请选择学院:</p>
        <picker mode="selector" :range="collegeOptions" @change="onCollegeChange">
          <view class="picker">
            {{ selectedCollege ? selectedCollege : '请选择学院' }}
			<!-- {{ selectedCollege || '请选择学院' }} <!-- 默认提示 --> 
          </view>
        </picker>
      </div>
      <div class="form-group" >
        <p>请选择专业:</p>
        <picker mode="selector" :range="majorOptions" @change="onMajorChange">
          <view class="picker">
            {{ selectedMajor ? selectedMajor : '请选择专业' }}
          </view>
        </picker>
      </div>
      <div class="form-group">
        <p>密码：</p>
        <input type="password" v-model="password" id="password" required />
      </div>
      <div class="form-group">
        <p>再次确认密码：</p>
        <input type="password" v-model="confirmPassword" id="confirmPassword" required />
      </div>
      <button type="submit" @click="handlePromotion">注册</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collegeOptions: ['信息工程', '经济管理学院', '智能制造'],
      majorOptions: ['计算机科学', '市场营销', '电子工程'], 
      selectedCollege: '信息工程',
      selectedMajor: '计算机科学'
    };
  },
  methods: {
    onCollegeChange(event) {
      const index = event.detail.value;
      this.selectedCollege = this.collegeOptions[index]; 
    },
    onMajorChange(event) {
      const index = event.detail.value;
      this.selectedMajor = this.majorOptions[index]; 
    },
	  handlePromotion() {
	      // 弹出提示框
	      uni.showToast({
	        title: '提交成功',
	        icon: 'success',
	        duration: 2000 // 持续时间，单位为毫秒
	      });
	    }
  }
};
</script>
<style scoped>
.picker {
  border: 2px solid #7c7c7c;
  height: 5vh;
  line-height: 5vh;
}
input {
  border: 2px solid #7c7c7c;
  height: 5vh;
}
p {
		font-weight: bold;
		font-size: 20px;
		margin: 15px 0;
}
button{
	width: 60vw;
	margin-top: 20px;
	background-color: #1caefa;
}
</style>
